<template>
  <div class="statusTip">
    <a-spin :tip="loadingText" v-if="status == 0"></a-spin>
    <div class="noData" v-if="status == 1">
      <p>{{ emptyText }}</p>
    </div>
    <div class="timeout" v-if="status == 2" @click="retry">
      <p>{{ timeoutText }}</p>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    status: {
      type: Number,
      default: 0
    },
    loadingText: {
      type: String,
      default: '正在努力加载中...'
    },
    emptyText: {
      typeof: String,
      default: '暂无数据！'
    },
    timeoutText: {
      typeof: String,
      default: '网络超时，请点击重试！'
    }
  });
  const emit = defineEmits(['onRetry']);
  const retry = () => {
    emit('onRetry');
  };
</script>

<style lang="less" scoped>
  .statusTip {
    height: 100%;
    width: 100%;
    position: relative;
    white-space: nowrap;
    :deep(.ant-spin) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .noData,
    .timeout {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      color: '#000';
      text-align: center;
      & > p {
        line-height: 0;
      }
    }
  }
</style>
